<template>
	<view class="content">
		<view class="tab clear-both">
			<view class="tabitem float-l" v-for="(item,index) in tabList" :key="index">
				<view :class="['tabitems fs14 color3',{'act':item==orderstatus}]" @tap="switchStatus(item)">{{item}}</view>
			</view>
		</view>
		<view class="text-center fs16 color3 font-weight mt10" v-if="isHave">没有相关订单！</view>
		<view class="center-list" v-for="(item,index) in allList" :key="index">
			<navigator :url="'/pages/order-detail/order-detail?id='+item.orderitem.OrderId">
				<view class="center-list1 fs14 color3">
					<view class="center-list11 mt0">
						<text>订单号：</text><text>{{item.orderitem.OrderId}}</text>
					</view>
					<view class="center-list11">
						<text>收货人：</text><text>{{item.orderitem.Consignee}}</text>
					</view>
					<view class="center-list11">
						<text>联系方式：</text><text>{{item.orderitem.ConsigneePhone}}</text>
					</view>
					<view class="center-list11">
						<text>收货地址：</text><text>{{item.orderitem.ConsigneeAddress}}</text> 
					</view>
					<view class="center-list11">
						<text>配送时间：</text><text>{{item.orderitem.DeliveryDate}} {{item.orderitem.DeliveryTimeBegin}}-{{item.orderitem.DeliveryTimeEnd}}</text>
					</view>
				</view>
				<view class="center-list1 fs14 color3 bbnone" v-for="(items,indexs) in item.orderdetails" :key="indexs">
					<view class="center-list11 clear-both">
						<view class="float-l">{{items.CommodityName}}</view>
						<view class="float-r color9">x{{items.Number}}</view>
					</view>
				</view>
				<view class="center-heji clear-both bbnone fs14">
					<view class="float-l">
						<text>合计：</text><text class="colorm font-weight">¥{{item.orderitem.PayableAmount}}</text>
					</view>
					<view class="float-r">
						<view class="hejir2 fs12">{{item.orderitem.OrderStatus}}</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request/index.js'
	import date_parse from '@/util/date/date-parse.js'
	export default {
		data() {
			return {
				allList:[],
				tabList:['待付款','待配送','配送中','已完成','全部订单'],
				orderstatus:'待付款',
				isHave:false,
			};
		},
		onLoad(options) {
			options.status?this.orderstatus=options.status:'';
			this.getDate();
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		methods:{
			switchStatus(item){
				if(this.orderstatus!=item){
					this.orderstatus=item;
					this.getDate();
				}
			},
			getDate(){
				var that=this;
				uni.showLoading({
					mask:true
				})
				request.get({
						data: {
							c: 'UserOrderController',
							m: 'OrderList',
							pageno:1,
							rediskey:'',
							orderstatus:that.orderstatus=='全部订单'?'':that.orderstatus,
						}
					})
					.then(res => {
						console.log(res)
						if (res.Status == "ok") {
							if(res.Tag.length>0){
								that.isHave=false;
								that.allList=res.Tag;
								res.Tag.map((item)=>{
									item.orderitem.DeliveryDate=date_parse.jsonDateToDateString(item.orderitem.DeliveryDate)
								})
							}else{
								that.isHave=true;
								that.allList=[];
							}
				
						} else {
							uni.showModal({
								title:res.Msg,
								showCancel:false
							})
						}
					})
					.catch(error => {
						console.error(error)
					});
			}
		}
	}
</script>

<style lang="scss">
.content{
	.tab {
		display: block;
		border-bottom: 2upx solid #E1E1E1;
		border-top: 2upx solid #E1E1E1;
		width: 92vw;
		padding: 0 4vw;
		.tabitem{
			width: 18.4vw;
			text-align: center;
			white-space: nowrap;
			.tabitems{
				height: 100%;
				display: inline-block;
				margin: 0 auto;
				padding: 2vw 0;
			}
			.act{
				border-bottom: 2px solid #0A3A6F;
			}
		}
		
	}
	.center-list{
		padding: 4vw;
		width: 92vw;
		padding-bottom: 0;
		.center-list1 {
			width: 92vw;
			position: relative;
			padding-bottom: 4vw;
			border-bottom: 1px solid #E1E1E1;
			.mt0 {
				margin-top: 0;
			}
			.center-list11 {
				margin-top: 2.667vw;
			}
		}
		.bb0 {
			border-bottom: none;
		}
		.center-heji {
			border-top: 1px solid #E1E1E1;
			padding: 4vw 0;
			border-bottom: 2.667vw solid #F3F3F3;
			width: 92vw;
			.hejil {
				float: left;
				line-height: 8vw;
			}
			.hejir2 {
				padding: 1vw 2vw;
				color: #fff;
				background: #0A3A6F;
			}
		}
		
	}
	.mt10{
		margin-top: 10vw;
	}
}
</style>
